<template>
  <!-- vin码选择 -->
  <div>
    <TopFilter :list="topFilterList" :cols="2" :collapse="false" @filterChange="hanldeSearch"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      selectionType="single"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="handleRowSelectChange"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { queryCarListByVinAndLicence } from '@/api/part/partPurchase/purchaseOrder';

export default {
  props: {
    pIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      topFilterList: this.cteateTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: queryCarListByVinAndLicence,
      fetchParams: { xhrAbort: false },
      selectedRowData: [] // 选中的table数据
    };
  },
  methods: {
    cteateTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'vin'
        },
        {
          type: 'INPUT',
          label: '牌照号',
          fieldName: 'licence'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '底盘号',
          dataIndex: 'vin',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'license',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型代码',
          dataIndex: 'modelName',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户代码',
          dataIndex: 'ownerCode',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'ownerName',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '会员卡号',
          dataIndex: 'memberNo',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 点击搜索或者重置
    hanldeSearch(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        ...e
      });
    },
    // table选择变化
    handleRowSelectChange(e) {
      this.selectedRowData = e;
    },
    // 点击确定
    handleConfirm() {
      this.$emit('onConfirm', {
        carData: this.selectedRowData[0],
        index: this.pIndex
      });
      this.handleCancle();
    },
    // 点击取消
    handleCancle() {
      this.$emit('close2');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
